<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="tableBox">
        <tr>
            <th>姓名</th>
            <!-- <th>爱好</th> -->
            <th id="ageBox">年龄</th>
        </tr>
    </table>
    <!-- 
    创建：
	    document.createElement() 创建一个元素节点
    插入：		
        parent.appendChild()  向节点的子节点列表的结尾添加新的子节点
        parent.insertBefore(new,node)  在指定的子节点node前插入新的子节点new。
    -->
    <script>
        var arr = [{
            name: 'lemon',
            age: 18
        }, {
            name: 'xiaohong',
            age: 28
        }]
        var table = document.getElementById('tableBox')
        arr.forEach(function(item, idx){
            // item指的是对象
            var tr = document.createElement('tr')
            for(var key in item) {
                var td = document.createElement('td')
                td.innerText = item[key]
                tr.appendChild(td)
            }
            table.appendChild(tr)
        })
    </script>
    <script>
        var table = document.getElementById('tableBox')
        var ageBox = document.getElementById('ageBox')
        var firstTr = table.firstElementChild.firstElementChild
        var th = document.createElement('th')
        th.innerText='爱好'
        firstTr.insertBefore(th,ageBox)


    </script>
</body>
</html>